<template>
  <div class="wrapper">
    <!-- 此处编写你的页面-->
    <Card shadow>
      <p slot="title">查询条件</P>
      <Form ref="formInline" :model="userPagination" :label-width="80" inline>
        <FormItem prop="systemName" label="系统名称:">
          <Input type="text" v-model="userPagination.systemName" placeholder="请输入查询条件"/>
        </FormItem>
        <FormItem prop="appId" label="标识:">
          <Input type="text" v-model="userPagination.appId" placeholder="请输入查询条件"/>
        </FormItem>
        <FormItem prop="dateExpiry" label="失效日期">
          <DatePicker type="date" placeholder="Select date" v-model="userPagination.dateExpiry"></DatePicker>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleQuery('user')">查询</Button>
          <Button @click="handleReset('formInline')" style="margin-left: 8px">清除</Button>
        </FormItem>
      </Form>
    </Card>
    <Row>
      <Card shadow>
        <p slot="title">查询结果列表</P>
        <Button @click="modalInsert=true" style="margin:5px">新增</Button>

        <Button style="margin:5px" @click="deleteData()" v-show="isShow">全部删除</Button>

        <Table
          stripe
          height="400"
          :columns="columns"
          :data="griddata"
          ref="userGrid"
          highlight-row
          @on-selection-change="getSelections"
        >
          <template slot-scope="{ row }" slot="name">
            <strong>{{ row.name }}</strong>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="large" style="margin-right: 5px" @click="show(row)">修改</Button>
            <Button type="error" size="large" @click="remove(row)">删除</Button>
          </template>
        </Table>

        <!-- <Table stripe height="300" :columns="columns" :data="griddata" ref="userGrid" highlight-row @on-selection-change="getSelections"></Table> -->
        <div style="margin: 5px;overflow: hidden">
          <Page
            show-total
            :total="totalRecords"
            show-sizer
            style="float: right;"
            :page-size="pageSize"
            :page-size-opts="pagesizeArray"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
          />
        </div>
      </Card>
    </Row>
    <Modal v-model="modalEdit" draggable scrollable title="编辑界面" @on-ok="save()">
      <Form ref="formInline" :model="user" :label-width="80" inline>
        <FormItem prop="systemName" label="系统名称:">
          <Input type="text" v-model="user.systemName" placeholder="系统名称"/>
        </FormItem>
        <FormItem prop="bucket" label="根目录:">
          <Input type="text" v-model="user.bucket" placeholder="系统名称"/>
        </FormItem>
        <FormItem prop="totalLenght" label="容量大小:">
          <InputNumber v-model="user.totalLenght" placeholder="系统名称"/>
        </FormItem>
        <FormItem prop="usedLenght" label="已使用容量:">
          <InputNumber v-model="user.usedLenght" placeholder="系统名称"/>
        </FormItem>
        <FormItem prop="dateExpiry" label="失效日期">
          <DatePicker type="date" placeholder="Select date" v-model="user.dateExpiry"></DatePicker>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="modalInsert" draggable scrollable title="新增界面" @on-ok="save()">
      <Form ref="formInline" :model="user" :label-width="80" inline>
        <FormItem prop="systemName" label="系统名称:">
          <Input type="text" v-model="user.systemName" placeholder="系统名称"/>
        </FormItem>
        <FormItem prop="bucket" label="根目录:">
          <Input type="text" v-model="user.bucket" placeholder="系统名称"/>
        </FormItem>
        <FormItem prop="totalLenght" label="容量大小:">
          <InputNumber type v-model="user.totalLenght" placeholder="系统名称"/>
        </FormItem>
        <FormItem prop="usedLenght" label="已使用容量:">
          <InputNumber type="text" v-model="user.usedLenght" placeholder="系统名称"/>
        </FormItem>
        <FormItem prop="dateExpiry" label="失效日期">
          <DatePicker type="date" placeholder="Select date" v-model="user.dateExpiry"></DatePicker>
        </FormItem>
      </Form>
    </Modal>
    <!--编写你的页面结束-->
  </div>
</template>
   
<script>
import moment from "moment";
export default {
  data() {
    return {
      //存放组件绑定的值
      crurentOpenPanelName: "from",
      user: {
        appId: "",
        systemName: "",
        bucket: "",
        totalLenght: 0,
        usedLenght: 0,
        dateExpiry: ""
      },
      userPagination: {
        systemName: "",
        bucket: "",
        dateExpiry: ""
      },
      ruleInline: {
        systemName: [
          {
            required: true,
            message: "Please fill in the user name",
            trigger: "blur"
          }
        ],
        bucket: [
          {
            required: true,
            message: "Please fill in the password.",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur"
          }
        ]
      },
      currentPage: 1,
      pageSize: 10,
      totalRecords: 2,
      modalEdit: false,
      modalInsert: false,
      gridSelections: [],
      pagesizeArray: [10, 20, 50, 100],
      griddata: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "标识",
          key: "appId"
        },
        {
          title: "系统名称",
          key: "systemName"
        },
        {
          title: "根目录",
          key: "bucket"
        },
        {
          title: "容量大小",
          key: "totalLenght"
        },
        {
          title: "已使用容量",
          key: "totalLenght"
        },
        {
          title: "失效时间",
          key: "dateExpiry"
        },
        {
          title: "Action",
          slot: "action",
          width: 200,
          align: "center"
        }
      ]
    };
  },
  computed: {
    //计算属性：监控数据使用有变动，一旦有变动则自动触发
    // 控制全部删除按钮是否显示
    isShow() {
      return this.gridSelections.length > 1;
    }
  },
  created() {
    //请求接口数据
    this.handleQuery();
  },
  methods: {
    //存放页面操作方法
    //分页查询
    changePageSize(index) {
      this.pageSize = index;
      this.currentPage = 1;
      this.handleQuery();
    },
    changePage(index) {
      this.currentPage = index;
      this.handleQuery();
    },
    //查询条件清空
    handleReset(name) {
      this.$refs[name].resetFields(); //thi.$refs[你的定义的ref名]相当于document.getElementById('你的定义的id名')
    },
    //查询方法
    async handleQuery() {
      const res = await this.$http.post(
        "queryTableData",
        `currentPage=${this.currentPage}&&pageSize=${this.pageSize}`
      );
      // 将时间戳转为时间格式
      res.data.griddata.map(item => {
        return (item.dateExpiry = moment(item.dateExpiry).format("YYYY-MM-DD"));
      });

      //把查询到的数据给表格数据yyyy-MM-dd hh:mm
      this.griddata = res.data.griddata;
      this.totalRecords = res.data.totalRecords;
      this.currentPage = res.data.currentPage;
      this.pageSize = JSON.parse(res.data.pageSize);
    },
    //获取表格选中行
    getSelections(selection) {
      this.gridSelections = selection;
    },
    //保存数据
    save() {
      this.$http
        .post(
          "savedata", //保存数据
          `appId=${this.user.appId}&&systemName=${
            this.user.systemName
          }&&bucket=${this.user.bucket}&&dateExpiry=${this.user.dateExpiry}`
        )
        .then(res => {
          this.$Modal.success({
            title: "保存成功"
          });
          this.handleQuery();
        })
        .catch(err => {
          this.$Modal.error({
            title: "请求失败",
            content: err
          });
        });
    },
    //删除多个方法
    deleteData() {
      this.gridSelections = [];
      let appId = [];
      this.gridSelections.forEach(item => {
        appId.push(item.appId);
      });
      console.log(appId);

      this.$http
        .post("deletedata", `appId=${appId}`)
        .then(res => {
          this.$Modal.success({
            title: "删除成功"
          });
          this.handleQuery();
        })
        .catch(err => {
          this.$Modal.error({
            title: "请求失败",
            content: err
          });
        });
    },
    // 修改方法
    show(row) {
      console.log(row);
      const { appId, bucket, dateExpiry, systemName, totalLenght } = row;
      this.user = {
        appId,
        systemName,
        bucket,
        totalLenght,
        dateExpiry
      };
      this.modalEdit = true;
    },
    //删除方法
    remove(row) {
      console.log(row);

      this.$http
        .post("deletedata", `appId=${this.user.appId}`)
        .then(res => {
          this.$Modal.success({
            title: "删除成功"
          });
          this.handleQuery();
        })
        .catch(err => {
          this.$Modal.error({
            title: "请求失败",
            content: err
          });
        });
    }
  }
};
</script>
<style lang="less" scoped>
.ivu-btn {
  padding: 0 10px;
}
/deep/.ivu-btn-error > span {
  color: #fff !important;
}
</style>


